<template>
	<view class="content body">
		<view class="top">
			<view v-for="(item, index) in ['商品详情', '常见问题', '商品参数', '租赁流程']" :key="index">
				<view class="group" @click="particularsBooton(index)">
					<text>{{ item }}</text>
					<view :class="[particularsId === index ? 'top-bootom' : '']"></view>
				</view>
			</view>
		</view>

		<view class="details-img">
			<template v-if="getImgList">
				<view v-for="item in getImgList" :key="item">
					<image :src="url2 + item"></image>
				</view>
			</template>
			<u-empty v-else mode="data" icon="/static/main/image2x.png"></u-empty>
		</view>

		<!-- 	<view class="details-img" v-show="status[0]">
			<view v-for="item in getImgList">
				<image :src="url2 + item"></image>
			</view>
			<u-empty v-if="!classData[0]" mode="data" icon="/static/main/image2x.png"></u-empty>
		</view>

		<view class="details-img" v-show="status[1]">
			<view v-for="item in getImgList">
				<image :src="url2 + item"></image>
			</view>
			<u-empty v-if="!classData[1]" mode="data" icon="/static/main/image2x.png"></u-empty>
		</view>

		<view class="details-img" v-show="status[2]">
			<view v-for="item in getImgList">
				<image :src="url2 + item"></image>
			</view>
			<u-empty v-if="!classData[2]" mode="data" icon="/static/main/image2x.png"></u-empty>
		</view>

		<view class="details-img" v-show="status[3]">
			<view v-for="item in getImgList">
				<image :src="url2 + item"></image>
			</view>
			<u-empty v-if="!classData[3]" mode="data" icon="/static/main/image2x.png"></u-empty>
		</view> -->

		<view></view>
		<view class="bootom">
			<view class="name">为你推荐</view>
			<recommend :imageList="imgList"></recommend>
		</view>
	</view>
</template>

<script>
import recommend from '@/subPages/components/recommend.vue';
import api from '@/api/index.js';
import main from '@/api/main.js';
export default {
	name: 'particulars',
	components: {
		recommend
	},
	props: {
		classData: {
			type: Array,
			value: [{}, {}, {}, {}]
		}
	},
	onLoad() {
		//this.list = this.detailsArray[0]?.split(',');
	},
	data() {
		return {
			particularsId: 0,
			list: [],
			imgList: [],
			status: [true, false, false, false],
			url2: api.getPath()
		};
	},
	mounted() {
		this.getList();
	},
	computed: {
		getImgList() {
			let list = this.classData[this.particularsId]?.split(',');
			if (list) {
				return list;
			}
			return [];
		}
	},
	methods: {
		particularsBooton(row) {
			this.particularsId = row;
			this.status.forEach((item, index) => {
				this.status[index] = false;
			});
			this.status[row] = true;
			//	this.list = this.detailsArray[row]?.split(',');
		},
		getTag() {
			main.getTagArray({
				tag: '推荐'
			})
				.then((data) => {
					this.imgList = data.rows;
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		getList() {
			main.getList({}).then((res) => {
				console.log(res, '商品列表');
				this.imgList = res.rows.map(() => res.rows[Math.floor(Math.random() * res.rows.length)]);
				this.imgList = this.imgList.slice(0, 4);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.body {
	height: 100vh;
	padding-bottom: 120rpx;
}
.top {
	width: 100%;
	display: flex;
	justify-content: space-between;
	.group {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100rpx;
		.top-bootom {
			margin-top: 10rpx;
			width: 50rpx;
			height: 10rpx;
			background-color: #3b5dff;
			border-radius: 5rpx;
		}
	}
}

.details-img {
	image {
		width: 100%;
		height: 1000rpx;
		border-radius: 20rpx;
	}
}

.bootom {
	margin-top: 50rpx;
	padding-bottom: 220rpx;
	.name {
		font-weight: 600;
	}
}
</style>